<template>
  <div id="homemain2" class="home2">
    <Row :gutter="16">
      <Col span="7">
        <div class="mainbg">
          <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar">
          <div id="myChart2" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar">
          <div id="myChart3" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </Col>
      <Col span="10">
        <div class="mainbg" style="height:500px;">
          <div class="mainbgH">
            机组名称：{{mainState.equipmentName}}
            <span style="margin-left:30px;">当前状态：{{mainState.erpcode}}</span>
            <span style="margin-left:30px;">监测状态：{{mainState.alarmAlias}}</span>
          </div>
          <Button class="mbt2" type="primary" @click="$router.push({ path: '/state/onlineTrend'})" ghost>进入趋势分析</Button>
          <div class="fdjbg">
            <div class="fdjFont">
                  <div style="border-bottom:1px solid #b6daff;padding-bottom:10px;margin-bottom:10px;" v-if="mainState&&mainState.list.length>0" v-for="(item,index) in mainState.list" :key="index">
                  <span style="color:#6db10a" v-if="item.alarmAlias=='正常'">{{item.pointName}}：{{Number(item.value).toFixed(2)}}{{item.unit}}</span>
                  <span style="color:#c00" v-if="item.alarmAlias=='危险'">{{item.pointName}}：{{Number(item.value).toFixed(2)}}{{item.unit}}</span>
                  <span style="color:#e5ba07" v-if="item.alarmAlias=='报警'">{{item.pointName}}：{{Number(item.value).toFixed(2)}}{{item.unit}}</span>
                  <span style="color:#666" v-if="item.alarmAlias=='断网'">{{item.pointName}}：{{Number(item.value).toFixed(2)}}{{item.unit}}</span>
                  </div>
            </div>
          </div>
        </div>
        <div class="mainbg mar" style="height:505px;">
          <div class="mainbgH">机组大事件</div>
          <!-- <Button class="mbt" type="primary" ghost>选择日期</Button> -->
          <div class="timeLine" v-if="timeLineList.length>0">
            <div class="my_timeline_prev" @click="moveLeft">
              <Icon type="ios-arrow-dropleft-circle" />
            </div>
            <div class="ul_box">
              <ul
                class="my_timeline"
                style="width:880px;margin-left:0px;"
                ref="mytimeline"
              >
                <li
                  class="my_timeline_item"
                  @click="changeActive(index)"
                  v-for="(item, index) in timeLineList"
                  :key="index"
                >
                  <!--圈圈节点-->
                  <div
                    class="my_timeline_node"
                    :class="{ active: index == timeIndex }"
                  ></div>
                  <!--线-->
                  <div class="my_timeline_item_line"></div>
                  <!--标注-->
                  <div class="my_timeline_item_content">
                    {{ item.time.substr(5,6) }}
                  </div>
                </li>
              </ul>
            </div>
            <div class="my_timeline_next" @click="moveRight">
              <Icon type="ios-arrow-dropright-circle" />
            </div>
            <div class="content">
              <p class="tit">{{ timeLineList[timeIndex].time }}</p>
              <p>{{ timeLineList[timeIndex].overview }}</p>
              <p style="margin-top:10px;"><Button type="primary" @click="eventUrl(timeLineList[timeIndex].type)">查看详情</Button></p>
            </div>
          </div>
        </div>
      </Col>
      <Col span="7">
        <div class="mainbg">
          <div id="myChart4" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar">
          <div id="myChart5" :style="{ width: '100%', height: '100%' }"></div>
        </div>
        <div class="mainbg mar">
          <div id="myChart6" :style="{ width: '100%', height: '100%' }"></div>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { findByIdNew,getEventListByEquId,getWano,getHealth,getIO,getFailureMode,getSubSystem,getFailure } from "@/api/home2";
export default {
  data() {
    return {
      dingshi:'',
      equId:this.$route.query.id,
      mainState:{},
      colorarry: [
        "#24d5ef", "#f1205b", "#ffbc3c","#12ccee","#ef8337","#e34928","#f7bf44","#184dd5"
      ],
      option: {
        title: {
          text: "WANO指标",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "D1LHP",
          //   type: "bar",
          //   barWidth: "5",
          //   itemStyle: {
          //     color: "#24efbd"
          //   },
          //   data: [32.0, 24.9, 27.0, 23.2, 25.6, 56.7, 32.6, 20.0, 26.4, 23.3]
          // },
          // {
          //   name: "中间值",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#ffbe0e"
          //   },
          //   lineStyle: {
          //     color: "#ffbe0e"
          //   },
          //   data: [54, 53, 35, 52, 73, 54, 61, 73, 84, 55]
          // },
          // {
          //   name: "先进值",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#0a4add"
          //   },
          //   lineStyle: {
          //     color: "#0a4add"
          //   },
          //   data: [44, 53, 85, 72, 53, 64, 51, 73, 64, 75]
          // }
        ]
      },
      option2: {
        title: {
          text: "I0指标",
          subtext: "电气、机械、仪控在机组不可用时间（h)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "45"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   type: "pie",
          //   radius: 90,
          //   center: ["45%", "60%"],
          //   color: ["#24d5ef", "#f1205b", "#ffbc3c","#12ccee","#ef8337","#e34928","#f7bf44","#184dd5"],
          //   data: [
          //     // { value: 10, name: "电气" },
          //     // { value: 10, name: "仪控" },
          //     // { value: 10, name: "机械" }
          //   ]
          // }
        ]
      },
      option3: {
        title: {
          text: "应急柴油机故障类型统计",
          subtext: "问题数量(个)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "UD45",
          //   type: "bar",
          //   barWidth: "20",
          //   itemStyle: {
          //     color: "#2454ef"
          //   },
          //   data: []
          // }
        ]
      },
      option4: {
        title: {
          text: "机组健康状态",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   name: "",
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#24efbd"
          //   },
          //   lineStyle: {
          //     color: "#24efbd"
          //   },
          //   data: []
          // }
        ]
      },
      option5: {
        title: {
          text: "应急柴油机故障模式统计",
          subtext: "问题数量(个)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            },
            axisLabel: { interval: 0 }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   type: "bar",
          //   barWidth: "10",
          //   itemStyle: {
          //     color: "#f1145d"
          //   },
          //   data: []
          // }
        ]
      },
      option6: {
        title: {
          text: "应急柴油机故障子系统",
          subtext: "问题数量(个)",
          textStyle: {
            fontSize: 16
          }
        },
        grid: {
          left: "0%",
          top: "70",
          right: "15",
          bottom: "0%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: [],
          top: "35"
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisPointer: {
              type: "shadow"
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          // {
          //   type: "line",
          //   smooth: true,
          //   symbol: "circle",
          //   itemStyle: {
          //     color: "#fbac16"
          //   },
          //   lineStyle: {
          //     color: "#fbac16"
          //   },
          //   data: []
          // }
        ]
      },
      timeIndex: 0,
      timeLineList: [
        {
          time:'',
          overview:'',
          type:''
        }
      ]
    };
  },
  mounted() {
    this.getfindById();
    this.dingshi=setInterval(() => {
      this.getfindById();
    }, 5000);
    this.getEventList();
    let that=this;
    setTimeout(() => {
      that.getEchart();
    }, 1000);

    let myChart = this.$echarts.init(document.getElementById("myChart"));
    let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
    let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
    let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
    let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
    let myChart6 = this.$echarts.init(document.getElementById("myChart6"));
    myChart.setOption(this.option);
    myChart2.setOption(this.option2);
    myChart3.setOption(this.option3);
    myChart4.setOption(this.option4);
    myChart5.setOption(this.option5);
    myChart6.setOption(this.option6);

    var elementResizeDetectorMaker = require("element-resize-detector");
    var erd = elementResizeDetectorMaker()
    erd.listenTo(document.getElementById("homemain2"), function (element) {
      var width = element.offsetWidth
      var height = element.offsetHeight
      that.$nextTick(function () {
         myChart.resize();
      myChart2.resize();
      myChart3.resize();
      myChart4.resize();
      myChart5.resize();
      myChart6.resize();

      })
    })
    // let myChart = this.$echarts.init(document.getElementById("myChart"));
    // let myChart2 = this.$echarts.init(document.getElementById("myChart2"));
    // let myChart3 = this.$echarts.init(document.getElementById("myChart3"));
    // let myChart4 = this.$echarts.init(document.getElementById("myChart4"));
    // let myChart5 = this.$echarts.init(document.getElementById("myChart5"));
    // let myChart6 = this.$echarts.init(document.getElementById("myChart6"));
    // myChart.setOption(this.option);
    // myChart2.setOption(this.option2);
    // myChart3.setOption(this.option3);
    // myChart4.setOption(this.option4);
    // myChart5.setOption(this.option5);
    // myChart6.setOption(this.option6);
    // window.addEventListener("resize", function() {
    //   myChart.resize();
    //   myChart2.resize();
    //   myChart3.resize();
    //   myChart4.resize();
    //   myChart5.resize();
    //   myChart6.resize();
    // });
  },
  beforeDestroy() {
      clearInterval(this.dingshi)
  },
  methods: {
    eventUrl(type){
      if(type==2){
        this.$router.push({ path: "/test/testRecord" });
      }else if(type==3){
        this.$router.push({ path: "/repair/repairRecord" });
      }else if(type==4){
        this.$router.push({ path: "/problem/eventRecord" });
      }
    },
    changeActive(index) {
      this.timeIndex = index;
    },
    moveLeft() {
      let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
      if (marginLeft != 0) {
        this.$refs.mytimeline.style.marginLeft = marginLeft + 110 + "px";
        this.timeIndex = this.timeIndex - 1;
      }
    },
    moveRight() {
      let marginLeft = parseInt(this.$refs.mytimeline.style.marginLeft);
      if (marginLeft >= -220) {
        this.$refs.mytimeline.style.marginLeft = marginLeft - 110 + "px";
        this.timeIndex = this.timeIndex + 1;
      }
    },
    getfindById(){
      findByIdNew({id:this.equId}).then(res => {
        if (res.code == 0) {
          this.mainState=res.data
        }
      });
    },
    getEventList(){
      getEventListByEquId({equId:this.equId}).then(res => {
        if (res.code == 0) {
          this.timeLineList=res.data
        }
      });
    },
    getEchart(){
      let that=this;
      getWano({equId:this.equId}).then(res => {
        if (res.code == 0) {
             var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option.xAxis[0].data = yyy;
            that.option.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });
            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option.series.push({
                name: zzz[i][0].name,
                type: zzz[i][0].line ? "line" : "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }
            that.$echarts.init(document.getElementById("myChart")).setOption(that.option);
        }
      });

      getIO({equId:this.equId}).then(res => {
        if (res.code == 0) {
          var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option2.xAxis[0].data = yyy;
            that.option2.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option2.series.push({
                name: zzz[i][0].name,
                type: "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }
          that.$echarts.init(document.getElementById("myChart2")).setOption(that.option2);
        }
      });
      getFailure({equId:this.equId}).then(res => {
        if (res.code == 0) {
          var xxx = res.data.map(function(item) {
              return item.name;
            });
            var xxx2 = res.data.map(function(item) {
              return item.year;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option3.xAxis[0].data = yyy;
            that.option3.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.year == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option3.series.push({
                name: zzz[i][0].year,
                type: "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart3"))
              .setOption(that.option3);
        }
      });

      getHealth({equId:this.equId}).then(res => {
        if (res.code == 0) {
          var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option4.xAxis[0].data = yyy;
            that.option4.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });
            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option4.series.push({
                name: zzz[i][0].name,
                type: "line",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart4"))
              .setOption(that.option4);
        }
      });

      getFailureMode({equId:this.equId}).then(res => {
        if (res.code == 0) {
          var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option5.xAxis[0].data = yyy;
            that.option5.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });
            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option5.series.push({
                name: zzz[i][0].name,
                type: "bar",
                smooth: true,
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }
          that.$echarts.init(document.getElementById("myChart5")).setOption(that.option5);
        }
      });

      getSubSystem({equId:this.equId}).then(res => {
        if (res.code == 0) {
          var xxx = res.data.map(function(item) {
              return item.year;
            });
            var xxx2 = res.data.map(function(item) {
              return item.name;
            });

            var yyy = [];
            var yyy2 = [];
            xxx.forEach(function(item) {
              if (yyy.length > 0) {
                if (yyy.indexOf(item) > -1) {
                  return;
                } else {
                  yyy.push(item);
                }
              } else {
                yyy.push(item);
              }
            });
            xxx2.forEach(function(item) {
              if (yyy2.length > 0) {
                if (yyy2.indexOf(item) > -1) {
                  return;
                } else {
                  yyy2.push(item);
                }
              } else {
                yyy2.push(item);
              }
            });
            that.option6.xAxis[0].data = yyy;
            that.option6.legend.data = yyy2;
            var zzz = [];
            yyy2.forEach(function(item) {
              zzz.push(
                res.data.filter(function(apItem) {
                  return apItem.name == item;
                })
              );
            });

            for (var i = 0; i < zzz.length; i++) {
              var arry = [];
              for (let n = 0; n < zzz[i].length; n++) {
                arry.push(zzz[i][n].value);
              }
              that.option6.series.push({
                name: zzz[i][0].name,
                type: "bar",
                smooth: true,
                symbol: "circle",
                itemStyle: {
                  color: that.colorarry[i]
                },
                lineStyle: {
                  color: that.colorarry[i]
                },
                data: arry
              });
            }

            that.$echarts
              .init(document.getElementById("myChart6"))
              .setOption(that.option6);
          // for(let i=0;i<res.data.length;i++){
          //    that.option6.xAxis[0].data.push(res.data[i].name);
          //    that.option6.series[0].data.push(res.data[i].value)
          // }
          // that.option6.legend.data.push(res.data[0].name);
          // that.$echarts.init(document.getElementById("myChart6")).setOption(that.option6);
        }
      });
    }
  }
};
</script>

<style lang="less">
.home2 {
  padding: 15px;
  .mainbg {
    background: #edf5fe;
    padding: 15px;
    border-radius: 5px;
    height: 330px;
    position: relative;
    .mbt {
      position: absolute;
      right: 15px;
      top: 15px;
      z-index: 999;
      padding: 4px 10px;
      border-radius: 20px;
    }
    .mbt2 {
      padding: 4px 10px;
      border-radius: 20px;
      margin-top: 5px;
    }
    .mainbgH {
      font-size: 16px;
      font-weight: bold;
    }
  }
  .mar {
    margin-top: 15px;
  }
  .fdjbg {
    background: url(../../../assets/images/fdj.png) no-repeat center center;
    height: 100%;
    height: 400px;
    position: relative;
    .fdjFont {
      position: absolute;
      top: 240px;
      right: 0px;
      font-size: 13px;
      width: 130px;
      height:170px;
      overflow-y:auto;
    }
  }
}
.timeLine {
  padding-top: 40px;
  padding-left: 30px;
  padding-right: 30px;
  position: relative;
}
.my_timeline_prev,
.my_timeline_next {
  position: absolute;
  left: 0px;
  top: 30px;
  font-size: 30px;
  width: 10%;
  cursor: pointer;
}
.my_timeline_next {
  right: 0px;
  left: auto;
  text-align: right;
}
.ul_box {
  width: 100%;
  height: 60px;
  float: left;
  margin-top: 2px;
  overflow: hidden;
}
.my_timeline_item {
  display: inline-block;
  width: 110px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.my_timeline_node {
  box-sizing: border-box;
  position: absolute;
  z-index: 99;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 2px solid #b4c9f8;
  top: 4px;
  left: 50%;
  margin-left: -10px;
}
.my_timeline_node.active {
  background-color: #2454ef !important;
  border: 2px solid #b4c9f8;
}
.my_timeline_item_line {
  width: 100%;
  height: 10px;
  margin-top: 12px;
  border-top: 2px solid #c1d2fb;
  border-left: none;
}
.my_timeline_item_content {
  padding-top: 10px;
  font-size: 20px;
}
.content {
  margin-top: 80px;
  font-size: 16px;
  .tit {
    font-size: 20px;
  }
}
</style>
